<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .big {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 420px;
            height: 70px;
            /* background-color: orange; */
        }

        .big div {
            width: 100px;
            height: 65px;
            margin-right: 5px;
            font-size: 30px;
            text-align: center;
            line-height: 65px;
            color: #fff;
            border-radius: 5px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <h1>距离光棍节还剩：</h1>
    <div class="big">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
    <script>
        var big = document.querySelector('.big')
        times()
        //添加定时器
        var timer = setInterval(times, 1000)

        function times() {
            var toTime = +new Date('2022-11-11 00:00:00') //获取双十一时间戳
            var nowTime = +new Date() //获取当前的时间戳
            var times = (toTime - nowTime) / 1000 //获得时间差的总的秒数
            var day = parseInt(times / 60 / 60 / 24) // 获得天数
            var h = parseInt(times / 60 / 60 % 24) // 获得小时
            var h = h < 10 ? '0' + h : h
            var m = parseInt(times / 60 % 60) // 获得分钟
            var m = m < 10 ? '0' + m : m
            var s = parseInt(times % 60) // 获得秒
            var s = s < 10 ? '0' + s : s
            big.children[0].innerHTML = `${day}天`
            big.children[1].innerHTML = `${h}时`
            big.children[2].innerHTML = `${m}分`
            big.children[3].innerHTML = `${s}秒`
        }
    </script>
</body>

</html>